<template>
	<view class="warp">
		<view class="index_top">
			<view class="index_warp">
				<view class="logo">
					<view class="logo_text">
						12312312
					</view>
				</view>
				<navigator url="/pages/site/certificate" class="prize_box" hover-class="none">
					<view class="icon p1">
						<view class="o">多项国家发明专利</view>
						<view class="s">研发产品</view>
					</view>
					<view class="icon p2">
						<view class="o">室内环镜污染治理</view>
						<view class="s">甲级资质</view>
					</view>
				</navigator>
				<u-swiper :list="list" :effect3d="true" height="397" :circular="false" effect3d-previous-margin="38" bgColor="none"></u-swiper>
			</view>
		</view>
		
		<view class="goods_list_box">
			<view class="miaosha">
				<view class="all_title_box">
					<view class="title_left">
						<view class="svg"><image src="~@/static/jitai/svg/miaosha.svg"></image></view>
						<view class="text">产品分类</view>
					</view>

				</view>
				<view class="goods_item">
					<navigator class="item" url="/pages/goods/classify" hover-class="none">
						<image src="~@/static/jitai/pic/8889.jpg"></image>
						<view class="name">济态富氢水杯</view>
						<view class="price">￥1980.00</view>
					</navigator>
					<navigator class="item" url="/pages/goods/classify" hover-class="none">
						<image src="~@/static/jitai/pic/0001.jpg"></image>
						<view class="name">济态富氢水杯</view>
						<view class="price">￥1980.00</view>
					</navigator>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				notice: [{
						id: '1',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						id: '2',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						id: '3',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},

		onLoad(){
			this.getList()
		},
		methods: {
			getList(){
				this.$post('api/goods/list').then(res=>{
					console.log(res,'asdasd');
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
	}
	.index_top {
		width: 100%;
		height: 770rpx;
		background: #fff;
	}
	.logo {
		width: 187rpx;
		padding: 38rpx;
		
		.logo_text {
			width: 187rpx;
			height: 60rpx;
		}
	}
	.prize_box {
		width: 674rpx;
		height: 110rpx;
		background: rgba($color: #fff, $alpha: 0.3);
		border: 2rpx solid rgba(255,255,255,0.6);
		padding: 0 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 38rpx 28rpx 38rpx;
		
		.icon {
			color: #fff;
			.o {
				width: 200rpx;
				height: 34rpx;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
				font-size: 24rpx !important;
			}
			.s {
				font-size: 28rpx;
			}
		}
		.p1 {
			background: url(~@/static/jitai/p_2.png) no-repeat left center;
			background-size: auto 90%;
			padding-left: 100rpx;
		}
		.p2 {
			background: url(~@/static/jitai/p_3.png) no-repeat left center;
			background-size: auto 100%;
			padding-left: 80rpx;
		}
	}
	.index_icon {
		width: 100%;
		background: #fff;
		display: flex;
		justify-content: space-between;
		padding: 28rpx 38rpx;
		
		.item {
			text-align: center;
			
			image {
				width: 86rpx;
				height: 86rpx;
				margin: 0 auto;
			}
		}
		.span {
			color: #a3a3a3;
		}
	}
	.goods_list_box {
		width: 100%;
		padding: 28rpx 28rpx 18rpx 28rpx;
		
		.miaosha {
			width: 100%;
			padding: 28rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}
	}
	
	.goods_item {
		width: 100%;
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;
		
		.item {
			width: 308rpx;
			box-sizing: border-box;
			
			image {
				width: 308rpx;
				height: 308rpx;
				border-radius: 8rpx;
			}
			.name {
				font-size: 26rpx;
				color: #666;
				padding: 4rpx 0;
			}
			.price {
				font-size: 30rpx;
				font-weight: bold;
				color: #ffa911;
			}
		}
	}
</style>
